<ion-content no-padding class="contract-pay">
  <ion-grid no-padding>
    <ion-list>
      <ion-item class="pay-way">
        付款方式
        <div *ngFor="let v of payWays" style="float: right">
        <button class="one" text-center ion-button outline
                *ngIf="v.isShow"
                (click)="(data.payWay = v.value);calcPrice()" [color]="data.payWay == v.value?'main':'txt-tertiary'"
                item-right>
            {{v.name}}
        </button>
        </div>
      </ion-item>
      <ion-item class="rent-date">
        租期
        <button *ngFor="let v of monthItems"
                (click)="(!v.validCheck || v.validCheck()) && (data.rentDate=v.value);calcPrice()"
                text-center ion-button [color]="data.rentDate===v.value?'main':'txt-tertiary'" outline item-right>
          {{v.name}}
        </button>
      </ion-item>
      <ion-row class="start-date">
        <ion-col col-6 text-left no-padding>起租时间</ion-col>
        <ion-col>
          <ion-datetime class="start"
                        text-right displayFormat="YYYY年MM月DD日" placeholder="请选择起租日期"
                        onchange="calcPrice()"
                        [(ngModel)]="data.startDate" min={{startDate}} max="{{data.newData}}"></ion-datetime>
        </ion-col>
      </ion-row>
      <ion-row class="live">
        <ion-col col-6 text-left> 居住人</ion-col>
        <ion-col col-6 text-right>
          <ion-icon name="add" no-margin (click)="addPerson()"></ion-icon>
        </ion-col>
      </ion-row>
      <div *ngFor="let person of data.person;let idx=index" class="add-live">
        <ion-icon name="ios-remove-circle-outline" (click)="removePerson(idx)" class="remove"></ion-icon>
        <ion-row class="name">
          <ion-col col-4 text-left>姓名</ion-col>
          <ion-col>
            <ion-input text-right [(ngModel)]="person.customerName" type="text" no-margin
                       placeholder="请输入姓名"></ion-input>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-4 text-left>身份证号</ion-col>
          <ion-col>
            <ion-input text-right no-margin
                       [ngClass]="{'text-invalid':person.customerCard && !validationService.isIdNumber(person.customerCard)}"
                       [(ngModel)]="person.customerCard"
                       type="text" placeholder="请输入身份证号"></ion-input>
          </ion-col>
        </ion-row>
      </div>
    </ion-list>
  <div style="position: relative;">
    <ion-row full-width  style="position: absolute;bottom:53%;z-index: 1">
      <ion-icon name="detailed-account"
                (click)="showCostDetail=!showCostDetail"
                class="detailed-account"></ion-icon>
      <div full-width
           class="cost-detail-wrapper"
           [ngClass]="{show:showCostDetail}">
        <ion-grid class="pay-list" no-padding>
          <ion-row class="title">收费明细</ion-row>
          <ion-row *ngFor="let v of moneyItems" class="cost-t">
            <ion-col class="cost">{{v.name}}</ion-col>
            <ion-col class="cost">&yen;{{v.money}}</ion-col>
          </ion-row>
        </ion-grid>
      </div>
    </ion-row>

    <ion-row class="pay">
      <ion-col col-9 class="money" text-right>
        <p>&yen;<span> {{totalMoney}}</span>元</p>
        <span class="save">
            {{priceInfo?.strategy?.ruleName}}
          </span>
      </ion-col>
      <button col-3 [disabled]="!validationService.isIdNumber(data.person[0].customerCard)"
              class="payoff" (click)=gotoSignContract()>
        去签约
      </button>
    </ion-row>
  </div>
  </ion-grid>

</ion-content>
